<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件处理</title>
</head>
<body>
<!--
    1/绑定监听
        v-on:xxx="fun" @xxx="fun" @xxx="fun(参数)" 默认事件形参：event 隐含属性对象：$event
    2/事件修饰符
        @xxx.stop @xxx.prevent
    3/按键修饰符
        @keyup.enter @keyup.13
-->
<div id="example">
    <h2>1/绑定监听</h2>
    <button @click="test1">test1</button>
    <button @click="test2('beimeng.club')">test2</button>
    <button @click="test3">test3</button>
    <button @click="test4(123,$event)">test4</button>

    <h2>2/事件修饰符</h2>
    <div style="width: 200px;height: 200px;background: sandybrown" @click="test5">
        <div style="width: 100px;height: 100px;background: #920303" @click.stop="test6"></div> <!--click.stop停止事件冒泡-->
    </div>

    <a href="baidu.com" @click.prevent="test7">去百度</a> <!--click.prevent 组织原有事件执行-->

    <h2>3/按键修饰符</h2>
<!--    回车监听-->
    <input type="text" @keyup.13="test8">
    <input type="text" @keyup.enter="test8">
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const vm = new Vue({
        el:'#example',
        data:{

        },
        methods:{
            test1(){
                alert("test1");
            },
            test2(msg){
                alert(msg)
            },
            test3(event){
                alert(event.target.innerHTML)
            },
            test4(number,event){
                alert(number + '---' + event.target.innerHTML)
            },
            test5(){
                alert('out');
            },
            test6(){
                // event.stopPropagation()

                alert('inner');
            },
            test7(){
                // event.preventDefault() 阻止事件的默认行为
                alert("点击了")
            },
            test8(event){
                /*原始操作*/
                /*if (event.keyCode === 13){
                    alert(event.target.value + '---' + event.keyCode)
                }*/
            }
        }
    })
</script>
</body>
</html>